<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-header">
        <img src="../../assets/images/logo.svg" alt="大学校徽" class="login-logo" />
        <h1 class="login-title">大学新闻网管理系统</h1>
      </div>
      
      <a-form
        :model="loginForm"
        name="login-form"
        @finish="handleSubmit"
        class="login-form"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input 
            v-model:value="loginForm.username"
            size="large"
            placeholder="用户名"
            
          />
        </a-form-item>
        
        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password 
            v-model:value="loginForm.password"
            size="large"
            placeholder="密码"
            
          />
        </a-form-item>
        
        <a-form-item>
          <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
        </a-form-item>
        
        <a-form-item>
          <a-button 
            type="primary" 
            html-type="submit" 
            size="large"
            :loading="loading"
            block
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
// import axios from 'axios' // 移除旧的 axios 导入
import request from '@/utils/request' // 导入配置好的 axios 实例

const router = useRouter()

// 登录表单数据
const loginForm = ref({
  username: '',
  password: '',
  remember: true
})

const loading = ref(false)

// 处理登录提交
const handleSubmit = async (values) => {
  loading.value = true
  try {
    // 使用配置好的 request 实例
    const response = await request.post('/login/', {
      username: values.username,
      password: values.password
    })
    
    // 注意：由于响应拦截器可能已经处理了 res.data，这里的 response 直接就是后端返回的 data 部分
    // 并且如果 code !== 200，拦截器会 reject promise，代码不会执行到这里
    // 因此，这里的判断可以简化，或者根据拦截器的具体实现调整
    // if (response && response.data) { // 假设拦截器返回的是 res (即 response.data)
    //   localStorage.setItem('token', response.data) // token 应该在 response.data 中，而不是 response.data.data
    //   message.success(response.message || '登录成功')
    //   router.push('/admin/dashboard')
    // } else {
    //   // 这种情况理论上会被响应拦截器捕获并reject
    //   message.error(response.message || '用户名或密码错误')
    // }

    // 经过响应拦截器处理后，如果成功，response 就是 res.data
    // 假设后端返回的原始数据是 { code: 200, message: '成功', data: 'your_token_here' }
    // 响应拦截器成功时返回 res (即 response.data)，所以这里的 response 就是 { code: 200, message: '成功', data: 'your_token_here' }
    localStorage.setItem('token', response.data) // response.data 对应后端返回的 token 字符串
    const infoResponse = await request.get('/getInfo')
    if (infoResponse && infoResponse.data) {
      localStorage.setItem('userInfo', JSON.stringify(infoResponse.data))
    }
    message.success(response.message || '登录成功')
    router.push('/admin/dashboard')

  } catch (error) {
    // 错误已经在响应拦截器中通过 message.error 提示过了
    // 这里可以不用再提示，或者只做 console.error
    console.error('登录组件内捕获的错误:', error)
    // message.error('登录请求失败，请检查网络或联系管理员') // 这句可以移除，因为拦截器会处理
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  background-color: #f5f5f5;
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.login-logo {
  height: 60px;
  margin-bottom: 15px;
}

.login-title {
  font-size: 22px;
  font-weight: bold;
  color: #003366;
  margin: 0;
}

.login-form {
  margin-top: 20px;
}
</style>